<template>
  <div class="app-container">
    <el-row style="width: 100%">
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span>基本信息</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%">
              <tbody>
              <tr>
                <td><div class="cell">现有文件数量</div></td>
                <td><div class="cell" v-if="fileCount">{{fileCount}}  个</div></td>
              </tr>
              <tr>
                <td><div class="cell">现有文件夹数量</div></td>
                <td><div class="cell" v-if="folderCount">{{ folderCount}}  个</div></td>
              </tr>
              <tr>
                <td><div class="cell">现有标签数量</div></td>
                <td><div class="cell" v-if="tagCount">{{tagCount}}  个</div></td>
              </tr>
              <tr>
                <td><div class="cell">已用存储总量</div></td>
                <td><div class="cell" v-if="fileTotalInfo.fileSize">{{fileTotalInfo.fileSize.toFixed(2)}} {{fileTotalInfo.unit}}</div></td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" class="card-box" style="width: 100%">
        <el-card>
          <div slot="header"><span>近30天内文件数量统计图</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="myCharts" style="height: 420px" ></div>
          </div>
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>

<script>

import { getFileStatistics } from "@/api/monitor/statistics";
import { getFolderStatistics } from "@/api/monitor/statistics";
import { getFileDataByDate } from "@/api/monitor/statistics";
import { getTagStatistics } from "@/api/monitor/statistics";
import * as echarts from 'echarts';
import {getTotal} from "@/api/file/flie";


export default {
  name: "Server",
  components: {},
  props: [],
  data() {
    return {
      // 加载层信息
      loading: [],
      //现有文件按日期统计折线图
      myChart: null,
      // cache信息
      cache: [],
      //现有文件数统计
      fileCount: null,
      //现有文件夹数统计
      folderCount: null,
      fileTotalInfo: [],
      tagCount:null,
    };
  },

  created() {
    this.openLoading();
    this.getCountData();
    this.myChart = echarts.init(this.$refs.myCharts);
    this.mounted();//按照日期统计文件，并以折线图的形式展示

  },
  mounted(){
    this.$nextTick(() => {
      this.drawLine();
    });
  },
  methods: {
    getCountData() {
      let _this = this;
      getFileStatistics().then(response => {
        this.fileCount = response;
      })
      getFolderStatistics().then(response => {
        this.folderCount = response;
      })
      getTagStatistics().then(response => {
        this.tagCount = response;
      })
      getTotal().then(response => {
        this.fileTotalInfo = response.data;
        console.log(this.fileTotalInfo);
        console.log(response);
      });
    },

    //画折线图
    drawLine(){
      this.loading.close();
      this.myChart = echarts.init(this.$refs.myCharts, "macarons");
      getFileDataByDate().then((response)=>{
        var dates = [];    //横坐标数组（实际用来盛放X轴坐标值）
        var nums = [];    //纵坐标数组（实际用来盛放Y坐标值）
        //返回值是map的写法
        if (response) {
          for (var key in response) {
            console.log(key + ":" + response[key])
            dates.push(key);
            nums.push(response[key]);
          }
        }
        //返回值是list的写法
        // if (response) {
        //   for (var i = 0; i < response.length; i++) {
        //     date.push(response[i].create_time);
        //     nums.push(response[i].num);
        //   }
        // }
        this.myChart.setOption({
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ",
          },
          xAxis: {
            type: 'category',
            data: dates,
            name:'日期',
            axisLabel: {
              interval:0,//代表显示所有x轴标签显示
              rotate:15, //代表逆时针旋转45度
            }
          },
          yAxis: {
            type: 'value',
            data: nums,
            name:'文件数'
          },
          series: [{
            // 根据日期对应到相应的系列
            data: nums,
            name: '文件数',
            color: ['#3399FF'],  //折线条的颜色
            type: 'line',
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
          }]
        })
        window.onresize = this.myChart.resize;
      })
    },

    // 打开加载层
    openLoading() {
      this.loading = this.$loading({
        lock: true,
        text: "拼命读取中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
    }
  }
}
</script>
